<!doctype html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>This is title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        html, body, .container {
            height: 100%;
            width: 100%;
        }
 
        .container {
            display: table;
        }
 
        .container>div{
            display: table-row;
        }
 
        .top {
            height: 100px;
            background-color: #a9ff29;
        }
 
        .middle {
            background-color: #ffb91b;
        }
 
        .bottom {
            height: 50px;
            background-color: #40c3ff;
        }
    </style>
</head>
 
<body>
 
<div class="container">
    <div class="top">上</div>
    <div class="middle">中</div>
    <div class="bottom">下</div>
</div>
</body>
</html>